<template>
    <n-grid :x-gap="15" :cols="14" style="height: 100%;">
        <n-grid-item :span="3">
            <div style="background-color: #ffffff; height: 100%;">
                <div style="display: flex; flex-direction: row; align-items: center; margin-left: 20px; padding-top: 10px;">
                    <label style="font-size: 20px; font-weight: bold;">仓库</label>
                    <n-icon ml-15 cursor-pointer size="17" @click="">
                        <icon-ant-design:reload-outlined/>
                    </n-icon>
                    <n-icon color-primary ml-65 cursor-pointer size="17" @click="">
                        <icon-ant-design:plus-outlined/>
                    </n-icon>
                </div>
                <n-divider style="margin-top: 10px; margin-bottom: 15px;"/>
                <n-input placeholder="搜索仓库" style="width: 90%;" ml-10/>
                <n-collapse style="margin-top: 20px; margin-left: 20px;">
                    <n-collapse-item title="本地仓" name="1">
                        <n-list hoverable clickable :show-divider="false" style="width: 90%; padding-top: 5px;" ml-10>
                            <n-list-item v-for="store in stores_local" :key="store.id"
                                         style="font-size: 13px; height: 35px;"
                                         :class="store.id === storeChoose ? 'n-list-item-selected' : 'n-list-item-not-selected'"
                                         @click="chooseStore(store)">
                                <div style="display: flex; flex-direction: row; align-items: center;">
                                    {{ store.name }} <!-- 显示 store.name -->
                                </div>
                            </n-list-item>
                        </n-list>
                    </n-collapse-item>
                    <n-collapse-item title="海外仓" name="2">
                        <n-list hoverable clickable :show-divider="false" style="width: 90%; padding-top: 5px;" ml-10>
                            <n-list-item v-for="store in stores_foreign" :key="store.id"
                                         style="font-size: 13px; height: 35px;"
                                         :class="store.id === storeChoose ? 'n-list-item-selected' : 'n-list-item-not-selected'"
                                         @click="chooseStore(store)">
                                <div style="display: flex; flex-direction: row; align-items: center;">
                                    {{ store.name }} <!-- 显示 store.name -->
                                </div>
                            </n-list-item>
                        </n-list>
                    </n-collapse-item>
                    <n-collapse-item title="平台仓" name="3">
                        <n-list hoverable clickable :show-divider="false" style="width: 90%; padding-top: 5px;" ml-10>
                            <n-list-item v-for="store in stores_platform" :key="store.id"
                                         style="font-size: 13px; height: 35px;"
                                         :class="store.id === storeChoose ? 'n-list-item-selected' : 'n-list-item-not-selected'"
                                         @click="chooseStore(store)">
                                <div style="display: flex; flex-direction: row; align-items: center;">
                                    {{ store.name }} <!-- 显示 store.name -->
                                </div>
                            </n-list-item>
                        </n-list>
                    </n-collapse-item>
                </n-collapse>
            </div>
        </n-grid-item>
        <n-grid-item :span="11" mr-20>
            <n-card mt-20 pb-20>
                <n-h4 prefix="bar" align-text type="primary" ml-20>
                    <n-text style="align-items: center; font-size: 18px; font-weight: 700;">
                        基本信息
                        <icon-ph:pencil-simple-line style="font-size: 16px; color: #005BF5;" ml-5/>
                    </n-text>
                </n-h4>
                <n-grid :x-gap="12" :y-gap="30" :cols="5" ml-30 mt-20>
                    <n-grid-item span="1">
                        <n-text class="store-info-item">仓库编号：</n-text>
                        <n-text class="store-info-text">{{storeInfo.id}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="1">
                        <n-text class="store-info-item">仓库名：</n-text>
                        <n-text class="store-info-text">{{storeInfo.name}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="2">
                        <n-text class="store-info-item">创建时间： </n-text>
                        <n-text class="store-info-text">{{storeInfo.createTime}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="1">
                        <n-text class="store-info-item">负责人：</n-text>
                        <n-text class="store-info-text">{{storeInfo.storeManagerName}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="1">
                        <n-text class="store-info-item">创建人：</n-text>
                        <n-text class="store-info-text">{{storeInfo.adminName}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="3">
                        <n-text class="store-info-item">地址：</n-text>
                        <n-text class="store-info-text">{{storeInfo.address}}</n-text>
                    </n-grid-item>
                    <n-grid-item span="1">
                        <n-text class="store-info-item">备注：</n-text>
                        <n-text class="store-info-text">无</n-text>
                    </n-grid-item>
                </n-grid>
            </n-card>
            <n-card style="height: 8%;" mt-20/>
        </n-grid-item>
    </n-grid>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import {NButton} from 'naive-ui'
import AccountActions from "@/views/admin/system/account-manage/components/account-actions.vue";
const showForm = ref(false);
const stores_local = ref([])
const stores_foreign = ref([])
const stores_platform = ref([])
const storeChoose = ref(1)
const chooseStore = (store) => {
    storeChoose.value = store.id
    searchByCondition()
}
const handleClose = () => {
    showForm.value = false;
};
const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const storeInfo = ref({
    id: "",
    name: "",
    adminName: "",
    address: "",
    storeManagerName: "",
    createTime: ""
})
const searchByCondition = async () => {
    loading.value = true
    try {
        const res = await api.findStoreById({
            params: {
                id: storeChoose.value
            }
        })
        if(res.code === 200) {
            storeInfo.value = {...res.data}
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("查询管理员失败！")
    }finally{
        loading.value = false
    }
}
const queryLocalStoreList = async () => {
    loading.value = true
    try {
        const res = await api.findStoreByType({
            params: {
                type: "本地仓"
            }
        })
        if(res.code === 200) {
            stores_local.value = res.data
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取本地仓失败！")
    }finally{
        loading.value = false
    }
}
const queryForeignStoreList = async () => {
    loading.value = true
    try {
        const res = await api.findStoreByType({
            params: {
                type: "海外仓"
            }
        })
        if(res.code === 200) {
            stores_foreign.value = res.data
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取海外仓失败！")
    }finally{
        loading.value = false
    }
}
const queryPlatformStoreList = async () => {
    loading.value = true
    try {
        const res = await api.findStoreByType({
            params: {
                type: "平台仓"
            }
        })
        if(res.code === 200) {
            stores_platform.value = res.data
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取平台仓失败！")
    }finally{
        loading.value = false
    }
}
const rowKey = (rowData) => {
    return rowData.id
}
onMounted(()=>{
    searchByCondition()
    queryLocalStoreList()
    queryForeignStoreList()
    queryPlatformStoreList()
})
</script>
<style scoped>
:deep(.n-data-table-th__title),
:deep(.n-data-table-td) {
    text-align: center;

}
:deep(.n-select) {
    width: 120px !important;
}

:deep(.two-line-description) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制显示的行数 */
    overflow: hidden;
}
:deep(.n-tabs-tab) {
    background-color: #ffffff88 !important;
}
:deep(.n-tabs-tab--active) {
    font-weight: bold !important;
    background-color: #ffffff !important;
}
:deep(.n-tabs-pane-wrapper) {
    background-color: #ffffff !important;
    margin-top: -2px !important;
}
:deep(.n-data-table-th__title) {
    font-weight: bold !important;
    font-size: 13px !important;
}
:deep(.n-list-item-not-selected:hover) {
    background-color: #005BF50A !important;
}
:deep(.n-list-item-selected) {
    background-color: #005BF519 !important;
    color: #005bf5;
}
:deep(.n-list-item-selected:hover) {
    background-color: #005BF519 !important;
    color: #005bf5;
}
.store-info-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 12px;
    line-height: 32px;
    text-align: right;
    vertical-align: middle;
    float: left;
    position: relative;
    font-size: 16px;
    color: #55585F;
}
.store-info-text {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 12px;
    line-height: 32px;
    text-align: right;
    vertical-align: middle;
    float: left;
    position: relative;
    font-size: 16px;
    font-weight: 500;
}
</style>
